<template>
  <view class="evaluate-con">
    <div class="bar"></div>
    <view class="score" >
      <div class="score-title">反馈与建议</div>

      <view class="textarea" style="height: 280rpx; position: relative; margin-top: 24rpx;">
        <textarea v-model="expect" placeholder="请填写您的宝贵建议" maxlength="120"></textarea>
        <div class="textarea-text" style="position: absolute; right: 24rpx; bottom: 24rpx;color: #6F6F6F;font-size: 20rpx;">{{expect.length}}/120</div>
      </view>
      <view class="textarea" style="background: none;margin-top: 24rpx;">
        <view class="list acea-row row-middle">
          <view
            v-for="(item, uploadPicturesIndex) in uploadPictures"
            :key="uploadPicturesIndex"
            class="pictrue"
          >
            <image :src="item" />
            <image class="iconfont icon-guanbi1 font-color-red" style="width: 40rpx; height:40rpx; border-radius: 50%;top:-10rpx;right: -10rpx;" src="https://cos.aitshirt.cn/app-icon/delimage.png"  @click="uploadPictures.splice(uploadPicturesIndex, 1)"></image>
          </view>
          <view class="pictrue uploadBnt acea-row row-center-wrapper row-column" @tap="chooseImage">
            <text class="iconfont icon-icon25201"></text>
            <view>添加图片</view>
          </view>
        </view>
      </view>
      <div class="bar"></div>
      <view class="textarea" style="background: none;margin-top: 24rpx; display: flex; align-items: center;">
        联系方式：
        <input v-model="phone" type="number" placeholder="请输入手机号（选填）" maxlength="120"></input>
      </view>


      <div class="btn-content">
        <view class="keepBnt bg-color-red" @tap="submit">提交反馈</view>
      </div>


    </view>
  </view>
</template>
<script>
import { postOrderProduct, postOrderComment } from "@/api/store";
import { trim, chooseImage } from "@/utils/oldIndex";
import { required } from "@/utils/validate";
import { validatorDefaultCatch } from "@/utils/dialog";
import { _router } from "@/utils/oldIndex";
import { feedbackAPi } from "@/api/designUser";

const NAME = "GoodsEvaluate";

export default {
  name: NAME,
  components: {
    // VueCoreImageUpload
  },
  props: {},
  data: function() {
    return {
      uploadPictures: [],
      expect: "",
      unique: "",
      phone: ""
    };
  },
  onLoad: function(option) {
  },
  methods: {
    chooseImage() {
      chooseImage(img => {
        this.uploadPictures.push(img);
      });
    },
    async submit() {
      const expect = trim(this.expect);
      feedbackAPi({
        imgs: this.uploadPictures.join(","),
        content: expect,
        phone: this.phone
      })
        .then(() => {
          uni.showToast({
            title: "成功",
            icon: "success",
            duration: 2000
          });
          // ? 回跳到上一页
          _router.back();
        })
        .catch(err => {
          uni.showToast({
            title:
              err.msg || err.response.data.msg || err.response.data.message,
            icon: "none",
            duration: 2000
          });
        });
    }
  }
};
</script>
<style scoped lang="less">
.evaluate-con .score .textarea .list .pictrue.uploadBnt {
  border: 1px solid #ddd;
}
</style>


<<style lang="less" scoped>
//@import "../../style/style";
.evaluate-con {
  display: flex;
  flex-direction: column;
  height: 100vh;
  //background-color: red;
  background: #F3F7F8;
  .score {
  }
}
page {
  background: #F3F7F8;
  min-height: 100vh;
  padding: 16rpx;
  overflow: hidden;
}
.bar {
  width: 100vw;
  height: 16rpx;
  background: #F3F7F8;
  margin-left: -16rpx;
}
.score {
  padding: 16rpx !important;
  margin: 30rpx 16rpx !important;
  background-color: none !important;
  border-top: none !important;
  border-radius: 16rpx 16rpx 0rpx 0rpx !important;
  .score-title {
    height: 42rpx;
    font-weight: 400;
    font-size: 32rpx;
    color: #222222;
    line-height: 42rpx;
    text-align: left;
  }
  .score-rate {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 24rpx 0 0 ;
    :deep(.wd-rate) {
      margin: 0 auto;
    }
    .rate-text {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 24rpx;
      font-weight: 400;
      font-size: 24rpx;
      color: #6F6F6F;
      line-height: 32rpx;
      margin-top: 24rpx;
      .rate-text-item {
        width: 52rpx;
        &.active {
          color: #222222;
        }

      }
    }
  }
}


.btn-content {
  position: fixed ;
  width: 100vw;
  bottom: 0rpx;
  left: 0;
  height: 168rpx;
  background: #FFFFFF;
  box-shadow: 0rpx -2rpx 4rpx 2rpx rgba(9,9,9,0.08);
  padding:  48rpx 16rpx;
  .keepBnt {
    width: 686rpx !important;
    height: 72rpx!important;
    background: linear-gradient( 90deg, #F32F1A 0%, #F68A2D 100%)!important;;
    font-weight: 400!important;
    font-size: 28rpx!important;
    color: #FFFFFF!important;
    line-height: 72rpx!important;
    text-align: center!important;
    border-radius: 0rpx !important;
  }
}
</style>
